<script setup lang="ts">
import { ref } from "vue";
const isPrimaryBackground = ref(true);
function toggleBackground() {
  isPrimaryBackground.value = !isPrimaryBackground.value;
}
</script>
<template>
  <div>
    <button @click="toggleBackground">切换背景</button>
    <div
      :class="{
        'bg-primary': isPrimaryBackground,
        'bg-secondary': !isPrimaryBackground,
      }"
      class="content"
    >
      背景切换。
    </div>
  </div>
</template>
<style scoped>
.content {
  padding: 1rem;
}
.bg-primary {
  background-color: blue;
}
.bg-secondary {
  background-color: red;
}
</style>
